<template>
  <el-col :span="24">
    <div class="bg-purple-dark">
      <div class="cardInformation">
        <div class="blueIcon" />
        <div class="dataName">{{ $t('manage.realTime') }}</div>
      </div>
      <div class="cardUl">
        <div v-for="(item,index) in cardList" :key="index" class="cardList" :style="{width: screenWidth < 1920? (cardList.length===6 ?'15%':'23%') : (cardList.length===6 ?'15.5%':'24%')}">
          <div class="cardTxt">{{ item.text }}</div>
          <div class="cardNum">
            <span v-if="item.number">{{ item.amount || 0 }}</span>
            <span v-else-if="item.amount === null">{{ '-' }}</span>
            <span v-else>{{ item.amount && item.amount.toFixed(2) || 0 }}</span>
            <span v-if="item.unit&&item.amount">%</span>
          </div>
        </div>
      </div>
    </div>
  </el-col>
</template>

<script>
export default {
  name: 'DataCard',
  props: {
    cardList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      screenWidth: window.screen.width
    }
  }
}
</script>
<style scoped lang="scss">
    @import './style'
</style>
